<template>
  <div class="levels-container">
    <div class="header">
      <h1>等级管理</h1>
    </div>
    
    <div class="content">
      <div class="levels-grid">
        <div v-for="level in levels" :key="level.levelId" class="level-card">
          <div class="level-header">
            <h3>{{ level.levelName }}</h3>
            <span class="level-badge">Lv{{ level.levelId }}</span>
          </div>
          
          <div class="level-info">
            <div class="info-item">
              <label>所需经验值</label>
              <input v-model.number="level.requiredXP" type="number" />
            </div>
            
            <div class="info-item">
              <label>折扣比例</label>
              <div class="discount-input">
                <input v-model.number="level.discount" type="number" min="0" max="100" />
                <span>%</span>
              </div>
            </div>
            
            <div class="info-item">
              <label>折扣金额</label>
              <input v-model.number="level.discountAmount" type="number" step="0.01" />
            </div>
            
            <div class="info-item">
              <label>用户数</label>
              <input v-model.number="level.userCount" type="number" disabled />
            </div>
          </div>
          
          <div class="level-actions">
            <button @click="saveLevelChanges(level)" class="btn btn-save">保存修改</button>
            <button @click="resetLevel(level)" class="btn btn-reset">重置</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Levels',
  data() {
    return {
      levels: []
    }
  },
  mounted() {
    this.fetchLevels()
  },
  methods: {
    async fetchLevels() {
      try {
        // 获取用户等级统计，使用请求参数与后端 @RequestParam 对齐
        const response = await axios.post('http://localhost:8888/elm/admin/users/list', null, {
          params: {
            page: 1,
            size: 1000
          }
        })
        
        if (response.data.code === 200 || response.data.code === '200') {
          const users = response.data.result.users || []
          
          // 统计各等级用户数量
          const levelStats = {}
          users.forEach(user => {
            const level = user.level || 1
            if (!levelStats[level]) {
              levelStats[level] = 0
            }
            levelStats[level]++
          })
          
          // 创建等级数据
          this.levels = [
            {
              levelId: 1,
              levelName: '普通会员',
              requiredXP: 0,
              discount: 100,
              discountAmount: 0,
              userCount: levelStats[1] || 0
            },
            {
              levelId: 2,
              levelName: '银牌会员',
              requiredXP: 1000,
              discount: 98,
              discountAmount: 2,
              userCount: levelStats[2] || 0
            },
            {
              levelId: 3,
              levelName: '金牌会员',
              requiredXP: 5000,
              discount: 95,
              discountAmount: 5,
              userCount: levelStats[3] || 0
            },
            {
              levelId: 4,
              levelName: '钻石会员',
              requiredXP: 10000,
              discount: 90,
              discountAmount: 10,
              userCount: levelStats[4] || 0
            },
            {
              levelId: 5,
              levelName: '至尊会员',
              requiredXP: 50000,
              discount: 85,
              discountAmount: 15,
              userCount: levelStats[5] || 0
            }
          ]
        }
      } catch (error) {
        console.error('获取等级数据失败:', error)
        // 使用默认数据
        this.levels = [
          {
            levelId: 1,
            levelName: '普通会员',
            requiredXP: 0,
            discount: 100,
            discountAmount: 0,
            userCount: 0
          },
          {
            levelId: 2,
            levelName: '银牌会员',
            requiredXP: 1000,
            discount: 98,
            discountAmount: 2,
            userCount: 0
          },
          {
            levelId: 3,
            levelName: '金牌会员',
            requiredXP: 5000,
            discount: 95,
            discountAmount: 5,
            userCount: 0
          },
          {
            levelId: 4,
            levelName: '钻石会员',
            requiredXP: 10000,
            discount: 90,
            discountAmount: 10,
            userCount: 0
          },
          {
            levelId: 5,
            levelName: '至尊会员',
            requiredXP: 50000,
            discount: 85,
            discountAmount: 15,
            userCount: 0
          }
        ]
      }
    },
    
    async saveLevelChanges(level) {
      try {
        // 这里可以实现等级配置保存逻辑
        // 由于当前系统没有专门的等级配置表，我们只是模拟保存
        console.log('保存等级配置:', level)
        alert(`等级 ${level.levelName} 配置已保存`)
        
        // 重新获取数据
        await this.fetchLevels()
      } catch (error) {
        console.error('保存等级配置失败:', error)
        alert('保存失败')
      }
    },
    
    async resetLevel(level) {
      if (confirm(`确定要重置等级 ${level.levelName} 的配置吗？`)) {
        try {
          // 重置为默认值
          const defaultLevels = {
            1: { discount: 100, discountAmount: 0 },
            2: { discount: 98, discountAmount: 2 },
            3: { discount: 95, discountAmount: 5 },
            4: { discount: 90, discountAmount: 10 },
            5: { discount: 85, discountAmount: 15 }
          }
          
          const defaultConfig = defaultLevels[level.levelId]
          if (defaultConfig) {
            level.discount = defaultConfig.discount
            level.discountAmount = defaultConfig.discountAmount
          }
          
          alert(`等级 ${level.levelName} 已重置为默认配置`)
        } catch (error) {
          console.error('重置等级配置失败:', error)
          alert('重置失败')
        }
      }
    },
    
    async upgradeUsers() {
      try {
        // 模拟批量升级用户等级的逻辑
        await axios.post('http://localhost:8888/elm/admin/users/batchUpgrade')
        alert('用户等级批量升级完成')
        await this.fetchLevels()
      } catch (error) {
        console.error('批量升级失败:', error)
        alert('批量升级功能暂未实现')
      }
    }
  }
}
</script>

<style scoped>
.levels-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  background: white;
  padding: 20px 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.level-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #FF6B6B;
}

.level-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.level-badge {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.level-info {
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 15px;
}

.info-item label {
  display: block;
  margin-bottom: 5px;
  color: #666;
  font-size: 12px;
  font-weight: 600;
}

.info-item input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.info-item input:focus {
  outline: none;
  border-color: #FF6B6B;
}

.info-item input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.discount-input {
  display: flex;
  align-items: center;
  gap: 5px;
}

.discount-input input {
  flex: 1;
}

.discount-input span {
  color: #666;
  font-weight: 600;
}

.level-actions {
  display: flex;
  gap: 10px;
}

.btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-save {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
  color: white;
}

.btn-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

.btn-reset {
  background-color: #f0f0f0;
  color: #333;
}

.btn-reset:hover {
  background-color: #e0e0e0;
}
</style>
